<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="./main.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <title>Document</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <!-- logo -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Toggler -->
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 菜单 -->
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Homepage</a>
            </li>
            <!-- 下拉 -->
            <li class="nav-item dropdown dropdown-animate" data-toggle="hover">
              <a
                class="nav-link"
                href="#"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                >Other</a
              >
              <div class="dropdown-menu dropdown-menu-single">
                <a href="index.html" class="dropdown-item">Homepage</a>
                <a href="about.html" class="dropdown-item">About us</a>
                <a href="contact.html" class="dropdown-item">Contact</a>
                <div class="dropdown-divider"></div>
                <a href="login.html" class="dropdown-item">Login</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
          <a
            class="navbar-btn btn btn-sm btn-primary d-none d-lg-inline-block ml-3"
            href="#">
            Login
          </a>
        </div>
      </div>
    </nav>

    <section class="slice py-7">
      <div class="container">
        <div class="row row-grid align-items-center">
          <div class="col-12 col-md-5 col-lg-6 order-md-2 text-center wow animate__animated animate__rollIn">
            <!-- Image -->
            <figure class="w-100">
              <img
                alt="Image placeholder"
                src="https://images.uiiiuiii.com/wp-content/uploads/2019/07/i-illust-nm0701-2-02.jpg"
                class="img-fluid mw-md-120" />
            </figure>
          </div>
          <div class="col-12 col-md-7 col-lg-6 order-md-1 pr-md-5  wow animate__animated animate__fadeInUpBig">
            <h1 class="display-4 text-center text-md-left mb-3">
              It's time to amplify your
              <strong class="text-primary">online business</strong>
            </h1>
            <p class="lead text-center text-md-left text-muted">
              Build a beautiful, modern website with flexible Bootstrap
              components built from scratch.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section
      class="slice pdtb-96 bg-section-secondary"
      style="background-color: #fafbfe">
      <div class="container">
        <!-- title -->
        <div class="row mb-5 justify-content-center text-center">
          <div class="col-lg-6">
            <span class="badge badge-soft-success badge-pill badge-lg">
              Get started
            </span>
            <h2 class="mt-4 wow animate__animated animate__slideInUp">
              Carefuly crafted components ready to use in your project
            </h2>
            <div class="mt-2"></div>
          </div>
        </div>
        <!-- card -->
        <div class="row mt-5  wow animate__animated animate__bounceInUp">
          <div class="col-md-4 pdtb-10">
            <div class="card">
              <div class="card-body pb-5">
                <div class="pt-4 pb-5">
                  <img
                    src="https://img0.baidu.com/it/u=2972612708,767987419&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"
                    class="img-fluid img-center"
                    style="height: 150px"
                    alt="Illustration" />
                </div>
                <h5 class="h4 lh-130 mb-3">Unleash you creativity</h5>
                <p class="text-muted mb-0">
                  Quick Website UI Kit (FREE) contains components and pages that
                  are easy to customize and change.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4 pdtb-10">
            <div class="card">
              <div class="card-body pb-5">
                <div class="pt-4 pb-5">
                  <img
                    src="https://img0.baidu.com/it/u=2972612708,767987419&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"
                    class="img-fluid img-center"
                    style="height: 150px"
                    alt="Illustration" />
                </div>
                <h5 class="h4 lh-130 mb-3">Unleash you creativity</h5>
                <p class="text-muted mb-0">
                  Quick Website UI Kit (FREE) contains components and pages that
                  are easy to customize and change.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4 pdtb-10">
            <div class="card">
              <div class="card-body pb-5">
                <div class="pt-4 pb-5">
                  <img
                    src="https://img0.baidu.com/it/u=2972612708,767987419&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"
                    class="img-fluid img-center"
                    style="height: 150px"
                    alt="Illustration" />
                </div>
                <h5 class="h4 lh-130 mb-3">Unleash you creativity</h5>
                <p class="text-muted mb-0">
                  Quick Website UI Kit (FREE) contains components and pages that
                  are easy to customize and change.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="slice pdtb-96">
      <div class="container">
        <div class="row justify-content-between align-items-center pdtb-72">
          <div class="col-lg-6 pdtb-10 wow animate__animated animate__bounceInLeft">
            <figure class="w-100">
              <img
                class="img-fluid mw-md-120"
                src="https://img0.baidu.com/it/u=1203513050,788537387&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                alt="" />
            </figure>
          </div>
          <div class="col-lg-5 pdtb-10 wow animate__animated animate__bounceInRight">
            <h3>With Quick you get components and examples</h3>
            <p class="lead my-4">
              With Quick you get components and examples, including tons of
              variables that will help you customize this theme with ease.
            </p>
            <ul class="li-style pdl-0">
              <li class="py-2">
                <div class="d-flex align-items-center">
                  <i class="bi bi-award-fill" style="color: #008aff"></i>
                  <span class="ml-2">customize this theme with ease</span>
                </div>
              </li>
              <li class="py-2">
                <div class="d-flex align-items-center">
                  <i class="bi bi-award-fill" style="color: #008aff"></i>
                  <span class="ml-2">customize this theme with ease</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="row justify-content-between align-items-center pdtb-72">
          <div class="col-lg-5 pdtb-10 wow animate__animated animate__bounceInLeft">
            <h3>With Quick you get components and examples</h3>
            <p class="lead my-4">
              With Quick you get components and examples, including tons of
              variables that will help you customize this theme with ease.
            </p>
            <ul class="li-style pdl-0">
              <li class="py-2">
                <div class="d-flex align-items-center">
                  <i class="bi bi-award-fill" style="color: #008aff"></i>
                  <span class="ml-2">customize this theme with ease</span>
                </div>
              </li>
              <li class="py-2">
                <div class="d-flex align-items-center">
                  <i class="bi bi-award-fill" style="color: #008aff"></i>
                  <span class="ml-2">customize this theme with ease</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-lg-6 pdtb-10 wow animate__animated animate__bounceInRight">
            <figure class="w-100">
              <img
                class="img-fluid mw-md-120"
                src="https://pic.616pic.com/photoone/00/06/02/618e27a2808f54896.jpg"
                alt="" />
            </figure>
          </div>
        </div>
      </div>
    </section>

    <section
      class="bg-section-dark"
      style="background-color: #000; padding-bottom: 196px">
      <!-- SVG separator -->
      <div
        class="shape-container shape-line shape-position-top shape-orientation-inverse">
        <svg
          width="100%"
          height="100px"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          preserveAspectRatio="none"
          x="0px"
          y="0px"
          viewBox="0 0 2560 100"
          style="background-color: #fff"
          xml:space="preserve"
          class="">
          <polygon points="2560 0 2560 100 0 100"></polygon>
        </svg>
      </div>
      <!-- Container -->
      <div class="container position-relative zindex-100">
        <div class="col">
          <div class="row justify-content-center">
            <div class="col-md-10 text-center">
              <div class="mt-4 mb-6">
                <h2 class="h1 text-white  wow animate__animated animate__bounceInUp">Create your own</h2>
                <h4 class="text-white mt-3  wow animate__animated animate__bounceInUp">
                  http://www.w3.org/2000/svg is an XML na
                </h4>
                <!-- Play button -->
                <a href="#" class="btn btn-primary btn-icon mt-4  wow animate__animated animate__bounceInUp">Learn more</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="slice pt-0 pb-0">
      <div class="container">
        <div class="row" style="position: relative; top: -100px">
          <div class="col-xl-4 col-sm-6 pdtb-10  wow animate__animated animate__bounceInLeft">
            <div class="card border-radius-20">
              <div class="p-5">
                <div class="pl-4">
                  <h5 class="lh-130">Listen to the nature</h5>
                  <p class="text-muted mb-0">
                    Design made simple with a clean and smart HTML markup.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-sm-6 pdtb-10 wow animate__animated animate__flipInY">
            <div class="card border-radius-20">
              <div class="p-5">
                <div class="pl-4">
                  <h5 class="lh-130">Listen to the nature</h5>
                  <p class="text-muted mb-0">
                    Design made simple with a clean and smart HTML markup.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-sm-6 pdtb-10  wow animate__animated animate__bounceInRight">
            <div class="card border-radius-20">
              <div class="p-5">
                <div class="pl-4">
                  <h5 class="lh-130">Listen to the nature</h5>
                  <p class="text-muted mb-0">
                    Design made simple with a clean and smart HTML markup.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-sm-6 pdtb-10  wow animate__animated animate__bounceInLeft">
            <div class="card border-radius-20">
              <div class="p-5">
                <div class="pl-4">
                  <h5 class="lh-130">Listen to the nature</h5>
                  <p class="text-muted mb-0">
                    Design made simple with a clean and smart HTML markup.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-sm-6 pdtb-10 wow animate__animated animate__flipInX">
            <div class="card border-radius-20">
              <div class="p-5">
                <div class="pl-4">
                  <h5 class="lh-130">Listen to the nature</h5>
                  <p class="text-muted mb-0">
                    Design made simple with a clean and smart HTML markup.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-4 col-sm-6 pdtb-10 wow animate__animated animate__bounceInRight">
            <div class="card border-radius-20">
              <div class="p-5">
                <div class="pl-4">
                  <h5 class="lh-130">Listen to the nature</h5>
                  <p class="text-muted mb-0">
                    Design made simple with a clean and smart HTML markup.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="slice pt-0">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <span class="badge badge-primary badge-pill">Key features</span>
            <h5 class="lh-180 mt-4 mb-6 wow animate__animated animate__flipInX">
              Quick is a premium HTML template that includes adaptable
              components and pages for various industries, plus new ones each
              month.
            </h5>
          </div>
        </div>
      </div>
    </section>
    <section class="slice pt-0">
      <div class="container">
        <div class="row"></div>
      </div>
    </section>

    <footer
      class="position-relative"
      id="footer-main"
      style="background-color: #273444;color: #ccc;">
      <div class="footer wow animate__animated animate__bounceInDown">
        <!-- Footer -->
        <div class="container pt-4">
          <div class="row">
            <div class="col-lg-4 mb-5 mb-lg-0">
              <!-- Webpixels' mission -->
              <p class="mt-4 text-sm opacity-8 pr-lg-4">
                Webpixels attempts to bring the best development experience to
                designers and developers by offering the tools needed for having
                a quick and solid start in most web projects.
              </p>
              <!-- Social -->
            </div>
            <div class="col-lg-2 col-6 col-sm-4 ml-lg-auto mb-5 mb-lg-0">
              <h6 class="heading mb-3">Account</h6>
              <ul class="list-unstyled">
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Billing</a></li>
                <li><a href="#">Notifications</a></li>
              </ul>
            </div>
            <div class="col-lg-2 col-6 col-sm-4 mb-5 mb-lg-0">
              <h6 class="heading mb-3">About</h6>
              <ul class="list-unstyled">
                <li><a href="#">Services</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Careers</a></li>
              </ul>
            </div>
            <div class="col-lg-2 col-6 col-sm-4 mb-5 mb-lg-0">
              <h6 class="heading mb-3">Company</h6>
              <ul class="list-unstyled">
                <li><a href="#">Community</a></li>
                <li><a href="#">Help center</a></li>
                <li><a href="#">Support</a></li>
              </ul>
            </div>
          </div>
          <hr class="divider divider-fade divider-dark my-4" />
          <div class="row align-items-center justify-content-md-between pb-4">
            <div class="col-md-6">
              <div
                class="copyright text-sm font-weight-bold text-center text-md-left">
                &copy; 2020
                <a
                  href="#"
                  class="font-weight-bold"
                  target="_blank"
                  >Webpixels</a
                > reserved
              </div>
            </div>
            <div class="col-md-6">
              <ul
                class="nav justify-content-center justify-content-md-end mt-3 mt-md-0">
                <li class="nav-item">
                  <a class="nav-link" href="#"> Terms </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"> Privacy </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"> Cookies </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>
  <script>
    new WOW().init();
  </script>
</html>
